<template>
  <el-dialog
    title="厂房信息"
    class="draft-dialog"
    :visible.sync="dialogDraftVisible"
    width="800px"
    append-to-body
  >
    <div>
      <el-form
        ref="form"
        :model="form"
        size="small"
        class="table-form"
        :rules="rules"
      >
        <table class="table table-bordered th-bg">
          <thead/>
          <tbody>
          <tr>
            <th width="150">厂房名称</th>
            <td>
              <el-form-item prop="name">
                <el-input
                  v-model="form.name"
                />
              </el-form-item>
            </td>
            <th width="150">长(m)</th>
            <td>
              <el-form-item prop="length">
                <el-input-number
                  v-model="form.length"
                />
              </el-form-item>
            </td>
          </tr>
          <tr>
            <th width="200">使用性质</th>
            <td>
              <el-form-item>
                <el-radio-group v-model="form.feature" style="width: 140px">
                  <el-radio label="1">车间</el-radio>
                  <el-radio label="2">仓库</el-radio>
                  <el-radio label="3">宿舍</el-radio>
                  <el-radio label="4">办公楼</el-radio>
                </el-radio-group>
              </el-form-item>
            </td>
            <th width="150" v-if="form.feature=='3'">床位数</th>
            <th v-else></th>
            <td v-if="form.feature=='3'">
              <el-form-item prop="beds">
                <el-input-number
                  v-model="form.beds"
                />
              </el-form-item>
            </td>
            <td v-else>
            </td>
          </tr>
          <tr>
            <th width="150">宽(m)</th>
            <td>

              <el-form-item prop="width">
                <el-input-number
                  v-model="form.width"
                />
              </el-form-item>
            </td>
            <th width="150">层高(m)</th>
            <td>

              <el-form-item prop="height">
                <el-input-number
                  v-model="form.height"
                />
              </el-form-item>
            </td>

          </tr>
          <tr>
            <th width="150">层数</th>
            <td>

              <el-form-item prop="floor">
                <el-input-number
                  v-model="form.floor"
                />
              </el-form-item>
            </td>
            <th width="150">面积（㎡）</th>
            <td>

              <el-form-item prop="area">
                <el-input-number
                  v-model="form.area"
                />
              </el-form-item>
            </td>

          </tr>
          <tr>
            <th width="150">配电容量(KVA)</th>
            <td>

              <el-form-item prop="electricCapacity">
                <el-input-number
                  v-model="form.electricCapacity"
                />
              </el-form-item>
            </td>
            <th width="200">消防使用性质</th>
            <td>
              <el-form-item>
                <el-radio-group v-model="form.firefightingQuality" style="width: 140px">
                  <el-radio label="甲">甲</el-radio>
                  <el-radio label="乙">乙</el-radio>
                  <el-radio label="丙">丙</el-radio>
                  <el-radio label="丁">丁</el-radio>
                  <el-radio label="戊">戊</el-radio>
                </el-radio-group>
              </el-form-item>
            </td>

          </tr>
          <tr>
            <th width="200">有无室内消火栓</th>
            <td>
              <el-form-item>
                <el-radio-group v-model="form.haveIndoorFireHydrant" style="width: 140px">
                  <el-radio label="true">是</el-radio>
                  <el-radio label="false">否</el-radio>
                </el-radio-group>
              </el-form-item>
            </td>
            <th width="150">地面承重(吨/平方米)</th>
            <td>

              <el-form-item prop="groundLoad">
                <el-input-number
                  v-model="form.groundLoad"
                />
              </el-form-item>
            </td>
          </tr>
          </tbody>
        </table>
        <div style="text-align: center">
          <el-form-item>
            <el-button
              type="primary"
              size="large"
              @click="submitForm"
            >
              保存
            </el-button>
          </el-form-item>
        </div>

      </el-form>
    </div>
  </el-dialog>
</template>

<script>
import crud from '@/mixins/crud'

export default {
  name: 'OrderList',
  components: {},
  mixins: [crud],
  data() {
    return {
      dialogDraftVisible: false,
      isEdit: false,
      index: 0,
      form: {
        lesseeName: '',
        leaseArea: '',
      },
      originForm: {},
      projectId: 0,
      rules: {
        'name': [
          { required: true, message: '请输入厂房名称', trigger: 'blur' }
        ]
      },
    }
  },
  methods: {

    submitForm() {
      this.$refs.form.validate(valid => {
        if (!valid) {
          if (this.isEdit) {
            this.resetHouseForm()
          }
          return
        }
        if (!this.isEdit) {
          this.$emit('addHouseForm', this.form);
        } else {
        }
        this.dialogDraftVisible = false
      })
    },
    resetHouseForm() {
      this.$emit('resetHouseForm', this.originForm, this.index);
    },

  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
.role-span {
  font-weight: bold;
  color: #303133;
  font-size: 15px;
}
</style>

<style rel="stylesheet/scss" lang="scss" scoped>
::v-deep .el-input-number .el-input__inner {
  text-align: left;
}

::v-deep .vue-treeselect__multi-value {
  margin-bottom: 0;
}

::v-deep .vue-treeselect__multi-value-item {
  border: 0;
  padding: 0;
}
</style>
